import * as React from 'react';
import { observer } from 'mobx-react';
import { Input, Button, Radio, Form, message, Col } from 'antd';
import { AccountModel } from '../../../model/setting/account/AccountModel';
import { SearchInput } from '../../components/SearchInput';
import { currUser } from "../../../model/CurrUserModel";

const RadioGroup = Radio.Group;
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
};
const tailFormItemLayout = {
    wrapperCol: {
        span: 14,
        offset: 6,
    },
};

@observer
export class CreateAccount extends React.Component<any, any> {

    state = {
        value: 1,
        store: new AccountModel()
    }

    onSubmit = () => {
        this.state.store.save().then(res => {
            message.success(res.message, 2.5);
        }, res => {
            message.error(res.message, 2.5);
        });
    }

    render() {
        var {store} = this.state;
        var {data} = store;

        return <Form horizontal>
            { currUser.superAdmin && <Form.Item
                {...formItemLayout}
                label="帐号类型"
                required
            >
                <RadioGroup value={data.superAdmin} onChange={e => data.superAdmin = e.target.value}>
                    <Radio value={true}>平台</Radio>
                    <Radio value={false}>媒体</Radio>
                    {!data.superAdmin &&
                        <SearchInput
                            value={data.meiti.name}
                            onChange={(name: string) => { store.fetchEventOptions(name) }}
                            placeholder="请输入媒体名称查询并选择"
                            options={store.mediaOptions}
                            onSelect={(selectedId: string) => store.updateMediaOptions(selectedId)} />
                    }
                </RadioGroup>
            </Form.Item> }
            <Form.Item
                {...formItemLayout}
                label="帐户名"
                required
                validateStatus={store.loginValid ? 'success' : 'error'}
            >
                <Input placeholder="请输入帐户名" value={data.login} onChange={e => data.login = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="登录密码"
                validateStatus={store.passwordValid ? 'success' : 'error'}
                required
            >
                <Input type="password" placeholder="请输入登录密码" value={data.password} onChange={e => data.password = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="备注信息"
                validateStatus={store.noteValid ? 'success' : 'error'}
                required
            >
                <Input placeholder="请输入店铺/品牌名称" value={data.note} onChange={e => data.note = e.target["value"]} />
            </Form.Item>
            <Form.Item
                {...formItemLayout}
                label="联系方式"
                required
                validateStatus={store.contactInfoValid ? 'success' : 'error'}
            >
                <Input placeholder="请输入联系方式" value={data.contactInfo} onChange={e => data.contactInfo = e.target["value"]} />
            </Form.Item>
            <Form.Item {...tailFormItemLayout}>
                <Button type="primary" size="large" onClick={this.onSubmit}>保存</Button>
                {/*{<Button size="large" style={{ marginLeft: 10 }}>取消</Button>}*/}
            </Form.Item>
        </Form>
    }
}